<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				font-size: 20px;
			}

			p {
				color: hotpink;
				font-size: 12px;
			}

			h4 {
				color: mediumpurple;
				font-size: 15px;
			}

			.animal {
				color: #FF69B4;
				font-size: 20px;
			}

			.plant {
				color: green;
				font-size: 15px;

			}

			.red {


				background-color: red;
			}

			.green {


				background-color: green;
			}

			.box {
				width: 200px;
				height: 200px;
			}

			#a {
				width: 200px;
				height: 200px;
				background-color: aqua;
			}
		</style>
	</head>
	<body>
		<p>第一个css样式的测试</p>
		<h4>样式需要写在style标签中，用键值对的形式，属性和值之间用冒号：隔开，每个属性写完后必须分号；结尾</h4>
		<h4>hbuilderx自带的规范化css书写格式就是最好的格式</h4>
		<h4>标签选择器最简单，会直接选中所有同类标签，但不能差异化选择，不灵活</h4>
		<br>
		<br>
		<br>
		<ul>
			<li class="animal">沙雕</li>
			<li class="animal">羊驼</li>
			<li class="plant">草，植物</li>
			<li class="animal">乌龟</li>
			<li class="animal">鳄鱼</li>
			<div class="animal">这是肉类</div>
			<div class="plant">这是素食</div>
		</ul>
		<h3>实际开发中用得最广泛的是类选择器class</h3>
		<div class="box red">红色</div>
		<div class="box green">绿色</div>
		<div class="box red">红色</div>
		<h3>多类名选择器，类名用空格隔开，这种方法可以节省代码量，更好维护</h3>
		<div id="a">科比</div>
		<div id="a">冒牌货</div>
		<h3>id选择器只能调用一次，相同id无法调用第二次,这就是id选择器无法大规模使用的原因，但是重复调用也会显示，id应该是用于匹配后端数据所以不允许重复</h3>
		<h3>通配符选择器很强大，更改所有标签，不需要调用</h3>
	</body>
</html>
